<template>
  <div class="setting-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="角色管理" name="first">
        <template v-slot:label>
          <span>角色管理</span>
        </template>
        <role />
      </el-tab-pane>
      <el-tab-pane label="公司信息" name="second"><company /></el-tab-pane>
    </el-tabs>
    <!-- 修改新增弹窗 -->
  </div>
</template>

<script>
import company from './components/company.vue'
import role from './components/role.vue'
export default {
  name: 'Setting',
  components: {
    company,
    role
  },
  data() {
    return {
      activeName: 'first'
    }
  }
}
</script>

<style lang="scss">
.setting-container {
  padding: 50px 15px 40px 60px;
  background-color: #fff;
  border-radius: 5px;
  .el-tabs__item {
    span {
      padding: 0 20px;
    }
  }
  .el-tabs__item.is-active,
  .el-tabs__item:hover,
  .el-button,
  .el-pager li.active {
    color: #00a6a6;
  }
  .el-button--primary,
  .el-dialog__title,
  .el-dialog__close {
    background-color: #00a6a6;
    color: #fff;
    border-color: transparent;
  }
  .el-tabs__active-bar,
  .el-dialog__header {
    background-color: #00a6a6;
  }
  .el-button--small,
  .el-pagination {
    margin: 10px 0;
    float: right;
  }
}
</style>
